<template>
  <div class="box">
    <el-row>
      <el-col :span="8">
        <el-card class="box-card" type="flex">
          <template #header>
            <div class="card-header">
              <span>会员数据</span>
              <el-button class="button" text>查看更多</el-button>
            </div>
          </template>
          <div class="text item"> 总量：99</div>
          <div class="text item"> 今日新增：1</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card" type="flex">
          <template #header>
            <div class="card-header">
              <span>订单数据</span>
              <el-button class="button" text>查看更多</el-button>
            </div>
          </template>
          <div class="text item"> 总量：9999</div>
          <div class="text item"> 今日新增：893</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card" type="flex">
          <template #header>
            <div class="card-header">
              <span>分享次数</span>
              <el-button class="button" text>查看更多</el-button>
            </div>
          </template>
          <div class="text item"> 总量：99999</div>
          <div class="text item"> 今日分享：3444</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card" type="flex">
          <template #header>
            <div class="card-header">
              <span>运行时间</span>
              <el-button class="button" text>查看更多</el-button>
            </div>
          </template>
          <div class="text item"> 服务器：40天</div>
          <div class="text item"> 数据库：37天</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
export default defineComponent({

})
</script>

<style lang="scss" scoped>
  .box {
    padding: 15px;
  }
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .box-card {
    margin:5px;
  }
</style>